<template>
    <Content title="请分配维修员">
        <view class="device-details">
            <view class="content">
                <view class="header-box">
                    <u-search placeholder="请输入姓名进行搜索" v-model="search.name" :clearabled="true" :showAction="false"
                        @search="getList(true)"></u-search>
                </view>
                <view class="header">全部</view>
                <view class="main-box">
                    <List ref="orderList" :scrollNoData="scrollNoData" :data="data" @itemClick="itemClick"
                        @onRefresh="onRefresh" @scrollBottom="scrollBottom" :multiple="true"></List>
                </view>
                <view class="btn-v">
                    <view class="but-box">
                        <u-button class="btn" type="primary" @click="ok" :loading="loading" :disabled="loading" text="确定"></u-button>
                    </view>
                </view>
            </view>
        </view>
    </Content>
</template>

<script>
    import Content from "@/components/content/index";
    import fetch from "@/utils/fetch";
    import {
        getPageData
    } from "@/store/user";
    import List from "./components/operator-list";
    export default {
        components: {
            Content,
            List,
        },
        data() {
            return {
                model: {},
                data: [],
                search: {
                    pageNum: 1,
                    pageSize: 9999,
                },
                show: false,
                radioGroup: "",
                scroll: false,
                scrollNoData: false,
                obj: {},
				ids:[],
				loading:false,
            };
        },
        onLoad: function(option) {
            //option为object类型，会序列化上个页面传递的参数
            this.search.materialCode = option.materialCode;
			this.ids=[option.id];
            this.showResult = option.showResult === "true";
            this.model = getPageData();
        },
        onShow: function() {},
        onReady: function() {
            this.getList();
            this.$nextTick(() => {
                const data = uni.getStorageSync("getSelectList", data);
                this.$refs.orderList.radioGroup = data;
            });
        },
        methods: {
            itemClick(i) {
                this.obj = this.data[i];
            },
            ok() {
                const that = this;
                let data = that.$refs.orderList.radioGroup || [];
                console.log("data", data);
                data = that.data.filter((item) => item.id === data) || [];
                if (data.length > 0) {
                    let selectIds = data || []; //用此页面的参数来存储
                    console.log("that.selectId", selectIds);
                    that.loadingVisible = true;
					this.loading=true;
					const params={
						operId:selectIds[0].id,
						ids:this.ids,
						operName:selectIds[0].name,
					}
                    fetch("post", "/dms/devSpotCheckTask/allotTask",null,params).then((res) => {
                        uni.$emit("openToast", {
                            type: "success",
                            title: "分配成功！",
                            complete() {
								this.loading=false;
                                uni.navigateBack({
                                    delta: 1, //返回上一页
                                });
                            },
                        });
                    });
                } else {
                    if (data)
                        uni.$emit("openToast", {
                            type: "error",
                            icon: "error",
                            title: "请选择分配人员!",
                        });
                    return;
                }
            },
            scrollBottom(next) {
                const that = this;
                if (!that.scrollNoData) {
                    that.search.pageNum = that.search.pageNum + 1;
                    that.scroll = true;
                    that.getList().then(() => {
                        next(that.scrollNoData);
                    });
                    return;
                }
                next();
            },
            getList(arg) {
                const that = this;
                that.$loading.open();
                if (arg) {
                    that.search.pageNum = 1;
                    that.scroll = false;
                    that.scrollNoData = false;
                    that.data = [];
                }
                let obj = {};
                for (const key in that.search) {
                    if (Object.hasOwnProperty.call(that.search, key)) {
                        const element = that.search[key];
                        if (element) obj[key] = element;
                    }
                }
                return fetch("get", "/dms/mobile/getUserNameList", obj).then(
                    ({
                        data
                    }) => {
                        if (that.scroll) {
                            if ((data?.list || []).length === 0) {
                                that.scrollNoData = true;
                            } else {
                                that.data.push(...data?.list);
                            }
                        } else {
                            that.data = data?.list || [];
                        }
                        that.$loading.close();
                    }
                );
            },
            onRefresh() {
                this.getList(true);
            },
        },
    };
</script>

<style scoped lang="scss">
    .device-details {
        height: 100%;
        overflow: auto;
        padding-bottom: 160rpx;

        .content {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .main-box {
            flex: 1;
            overflow: auto;
        }

        .header {
            font-weight: 600;
            margin-bottom: 20rpx;
            padding: 0 40rpx;
        }

        .header-box {
            padding: 5px 10px 5px;
            background-color: #ffffff;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }

        .title {
            font-size: 32rpx;
            margin-bottom: 20rpx;
            padding: 0 40rpx 20rpx 40rpx;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;

            .txt {
                flex: 1;
            }

            .tag-box {
                display: flex;
                align-items: center;
            }
        }

        .content-top {
            padding: 40rpx;

            .state {
                color: #f17a0a;
                margin-bottom: 20rpx;
            }
        }

        .text-box {
            display: flex;
            margin-bottom: 20rpx;

            .label {
                color: #666;
            }
        }

        .search-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60rpx;

            .label {
                margin: 0 20rpx;
            }
        }

        .number-davities-box {
            text-align: center;

            .header {
                margin-bottom: 20rpx;
            }

            .item-box {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20rpx;
            }
        }

        .btn-box {
            display: flex;

            .btn-box-item {
                padding: 20rpx;
                flex: 1;
                text-align: center;
                border-top: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
                color: #67aee7;
            }
        }
    }
</style>